var navRibbon = function() {

}

navRibbon.prototype.actionLoadPage = function (pageIdx) {
    
    if (pageIdx < pageData.length) {
        curPage = pageIdx;
        curPageData = $.extend({}, pageData[curPage]);
        
        if (curPage >= 8 && curPage <= 20) {
            $("#question").hide();
            isShowFileMenu = true;
        } else {
            $("#question").show();
            isShowFileMenu = false;
        }
        
        $("#headercontainer")[0].src = curPageData.headerimg;
		console.log(this);
        this.loadPageData();
        $("#incorrect")[0].src = '../images/incorrectMessage.png';
        log("info", "actionLoadPage-" + isShowFileMenu);
    }

}

navRibbon.prototype.loadPageData = function() {
    var i, actionType, curItem, newItem, gCtrl = $("#glasscontainer"), hCtrl = $("#headercontainer");
    
    gCtrl.html("");
	
    setTimeout(function() {
        gCtrl.css({ left: hCtrl.position().left,
					top: hCtrl.position().top,
					width: hCtrl.width(),
					height: hCtrl.height()});
    }, 100);
    
    for (i in curPageData.htmls) {
        curItem = curPageData.htmls[i];
        newItem = $(curItem[4]);
        newItem.css({
            position: "absolute",
            border: "0px",
            //"z-index": 9,
            left: curItem[0] + "px",
            top: curItem[1] + "px",
            width: (curItem[2] - curItem[0]) + "px",
            height: (curItem[3] - curItem[1]) + "px"
        });
        gCtrl.append(newItem);
    }
    
    for (i in curPageData.marks) {
        curItem = curPageData.marks[i];
        
        newItem = $("<div></div>");
        newItem.attr("id", i);
		newItem.attr("onclick", "doClickAction(event, this);");
		newItem.attr("onmouseover", "doOverAction(event, this)");
		newItem.attr("onmouseout", "doOutAction(event, this)");
		newItem.attr("oncontextmenu", "doRightClickAction(event, this)");
        newItem.css({
            //border: (DESIGN_MODE ? "1px solid blue" : "0px"),
            position: "absolute",
            "z-index": 99,
            left: curItem[0] + "px",
            top: curItem[1] + "px",
            width: (curItem[2] - curItem[0]) + "px",
            height: (curItem[3] - curItem[1]) + "px"
        });
        
        applyMouseCursor(newItem, i);
        gCtrl.append(newItem);
    }
    
    for (i in curPageData.action) {
        actionType = i.substring(0, 1);
        
        if ('i'.indexOf(actionType) >= 0) {
            curItem = curPageData.action[i];
            newItem = $('<img src="' + curItem[4] + '"></img>');
            newItem.attr("id", i);
            newItem.css({
                display: "none",
                position: "absolute",
                left: curItem[0] + "px",
                top: curItem[1] + "px"
            });
            gCtrl.append(newItem);
        } else if ('hbB'.indexOf(actionType) >= 0) {
            curItem = curPageData.action[i];
            newItem = $("<div></div>");
            newItem.attr("id", i);
            newItem.css({
                display: "none",
                "background-color": (actionType == 'h' ? "LightSteelBlue" : ""),
                border: (actionType == 'b' ? "1px solid lightblue" : (actionType == 'B' ? "4px solid LightSteelBlue" : "0px")),
                'box-sizing': 'border-box',
                opacity: 0.5,
                position: "absolute",
                left: curItem[0] + "px",
                top: curItem[1] + "px",
                width: (curItem[2] - curItem[0]) + "px",
                height: (curItem[3] - curItem[1]) + "px"
            });
            gCtrl.append(newItem);
        }
    }
}
